<template>
  <div class="employees-container">
    <div class="app-container">
      <img class="staff" :src="activer.staffPhoto" />
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
      <el-row>
        <el-button
        style=""
          class="button"
          type="primary"
          icon="el-icon-check"
          circle
          @click="clickShowCodeDialog"
        ></el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 导入二维码
import QrCode from 'qrcode'

export default {
  props: {
    activer: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      abc: ''
    }
  },

  methods: {
    clickShowCodeDialog () {
      this.abc = this.activer.staffPhoto
      console.log(this.abc, '456465')

      // 等dom更新后指向
      QrCode.toCanvas(this.$refs.myCanvas, this.abc)
      this.$nextTick(() => {
      })
    }
  }
}

</script>

<style lang="scss" scoped>
button,
.staff {
  margin-left: 50%;
  transform: translate(-50%, 0);
}
</style>
